<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Communication</h2>
		<p>In this guide we will learn how to communicate with the applications embedded inside a webpage using messages and how to use DOM elements to control app content.</p>
		<p>To communicate with the host webpage nunuStudio uses a message model system, where the host can send messages to the nunuStudio app and vice-versa, the messages are received using callback functions. To explore more about communication check the App API documentation.</p>

		<img src="assets/learn/integration/communication/scheme.png" class="img-big"/>

		<h3>Message communication</h3>
		<p>To comunicate with the running application a message communication model is used. The app or the page can send messages to each other that will be catched by callbacks used to process the information sent between them.</p>
		<p>Its also possible to communicate between apps running on the same page, to achieve this we can pass the app objects from the page to the apps.</p>

		<h3>Page to app</h3>
		<p>To send a message from the webpage to the nunuStudio application running the use the app.sendData(data) method. Data can be anything, assuming that the nunuApp is on the same JS context as the sender its possible send even object references.</p>
		<p>To receive these messages inside the app we need to create a onAppData callback and to send data we use the sendDataApp function stored in the program object. The code bellow is a simple example when the nunuStudio app receives data is shows the data on the text object, and every time the key P is pressed the nunuStudio app send a test message to the host webpage.</p>
		<pre><code class="hljs javascript">var text, counter;
function initialize()
{{'{'}}
	text = scene.getObjectByName("text");
	counter = 0;
{{'}'}}

function update()
{{'{'}}
	if(Keyboard.keyJustPressed(Keyboard.P))
	{{'{'}}
		program.sendDataApp("test" + counter);
	{{'}'}}
{{'}'}}

function onAppData(data)
{{'{'}}
	text.setText(data);
{{'}'}}</code></pre>

		<h3>App to page</h3>
		<p>Before sending data from the app to the webpage we need to define a onMessageReceive callback to process received messages. This callback can be defined as shown bellow, every time a message is send from the nunuStudio app to the webpage this function will be called.</p>
		<pre><code class="hljs javascript">//Send data to app
app.sendData("test text");

//Callback to receive data sent from the app
app.setOnDataReceived(function(data)
{{'{'}}
	console.log("Received message from nunuStudio app", data);
{{'}'}});</code></pre>
	</div>
</div>
